<template>
    <div class="soilBox">
        <div class="title">
                <label><vxe-icon name="location" status="success" roll></vxe-icon>土壤检测日期</label>
                <p style="padding-left:4px">{{soilList[0]?.testDateTime}}</p> 
            </div>
              <div class="yf-view" v-if="soilList.length>0">
                <div class="box-card" v-for="item in dataList">
                    <div class="title-view">
                        <div class="item">{{item.title}}</div>
                        <div class="item">({{getValue(item).value}}{{ item.unit }})</div>
                    </div>
                   <div style="margin:20px  10px; position: relative;"> 
                    <el-progress :percentage="getValue(item).percent" 
                    :format="format"
                    :stroke-width="10"></el-progress>
                  <span style="position: absolute;right:0;top: 0;"> {{ getValue(item).detail }}</span>
                </div>
                </div>
            </div> 
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {getSoilNutrient,delComposition} from '@/api/plant'
import { ElMessageBox } from 'element-plus'
import {message} from '@/utils/element'
const props = defineProps({
    detail:{
        type:Object,
        default:{}
    }
})
const emit = defineEmits(['set'])
const soilList = ref('')
const dataList = ref([
    {title:'酸碱程度PH',key:'ph',unit:''},
    {title:'有机质SOM',key:'som',unit:'g/kg'},
    {title:'全氮TN',key:'tn',unit:'g/kg'},
    {title:'速效钾AK',key:'k',unit:'mg/kg'},
    {title:'有效磷AP',key:'p',unit:'mg/kg'},
    {title:'土壤容重BD',key:'unitWeight',unit:'g/cm³'}
])
     

onMounted(()=>{
    get_Soil_Nutrient()
})
const get_Soil_Nutrient = ()=>{
    getSoilNutrient(props.detail.farmLandId).then(res =>{
        soilList.value = res.data
    })
}
const format=(percentage)=> {
        return '';
      }
const getValue = (item)=>{
  let obj = soilList.value[0][item.key]
  return obj
}
const del = (item)=>{
    ElMessageBox.confirm('确认删除土壤成分吗?','提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await delComposition([item.compositionId])
        if(res.code ==0 || res.success){
            message("删除成功",2)
            get_Soil_Nutrient()
           // emit('set')
        }else{
            message(res.message,3)
        }
    })
  }
</script>

<style lang="scss" scoped>
.title{
    display: flex;
    background: #00AF7016;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    height: 40px;
    padding:0 10px;
    margin-bottom:10px;
}
.yf-view{
  display: flex;
  flex-wrap: wrap;
  .box-card{
    width:23%;
    margin-right:20px;
    margin-bottom:20px;
    border: 1px solid #EEEEEE;
    .title-view{
        display: flex;
        justify-content: space-between;
        background: #F7F7F7;
        border-bottom: 1px solid #EEEEEE;
        height: 40px;
        align-items: center;
        padding:0 10px;
    }
  }
}
</style>